@use 'sass:map';
/* 定义初始主题颜色
------------------------------- */
$--text-color-primary: #1C1C1C !default;
$--color-whites: #FFFFFF !default;
$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-whites, $--color-primary, 10%) !default;
$--color-primary-light-3: mix($--color-whites, $--color-primary, 30%) !default;
$--color-primary-light-5: mix($--color-whites, $--color-primary, 50%) !default;
$--color-primary-light-7: mix($--color-whites, $--color-primary, 70%) !default;
$--color-primary-light-9: mix($--color-whites, $--color-primary, 90%) !default;
$--color-primary-dark-2: mix(#000000, $--color-primary, 20%) !default;
/* 定义初始菜单颜色
------------------------------- */
$--layout-menu-bg-color: $--color-whites;
$--layout-menu-color: var(--el-text-color-primary);
$--layout-menu-active-color: var(--el-color-primary);
$--layout-menu-active-bg-color: rgb(from var(--el-color-primary) r g b / 10%);
$--layout-submenu-bg-color: $--color-whites;

$--layout-menu-column-bg-color: $--color-whites;
$--layout-menu-column-color: var(--el-text-color-primary);
$--layout-menu-column-active-color: var(--el-color-primary);
$--layout-menu-column-active-bg-color: rgb(from var(--el-color-primary) r g b / 10%);
/* 定义初始导航栏颜色
------------------------------- */
$--layout-header-color: $--text-color-primary;
$--layout-header-bg-color: $--color-whites;
$--layout-header-hover-bg-color: #f6f6f6;
/* 其他颜色
------------------------------- */
$--layout-logo-color: $--text-color-primary;


/* 赋值给:root
------------------------------- */
:root {
  --el-color-whites: #{$--color-whites};
  --el-color-primary: #{$--color-primary};
  --el-color-primary-light-1: #{$--color-primary-light-1};
  --el-color-primary-light-3: #{$--color-primary-light-3};
  --el-color-primary-light-5: #{$--color-primary-light-5};
  --el-color-primary-light-7: #{$--color-primary-light-7};
  --el-color-primary-light-9: #{$--color-primary-light-9};
  --el-color-primary-dark-2: #{$--color-primary-dark-2};
  --el-text-color-primary: #{$--text-color-primary};
  --el-text-color-regular: #{$--text-color-primary};
  --el-text-color-secondary: #6f6f6f;
  /**菜单*/
  --layout-menu-bg-color: #{$--layout-menu-bg-color};
  --layout-menu-color: #{$--layout-menu-color};
  --layout-menu-active-color: #{$--layout-menu-active-color};
  --layout-menu-active-bg-color:#{$--layout-menu-active-bg-color};
  --layout-submenu-bg-color: #{$--layout-submenu-bg-color};

  --layout-menu-column-bg-color: #{$--layout-menu-column-bg-color};
  --layout-menu-column-color: #{$--layout-menu-column-color};
  --layout-menu-column-active-color: #{$--layout-menu-column-active-color};
  --layout-menu-column-active-bg-color: #{$--layout-menu-column-active-bg-color};
  /**导航栏*/
  --layout-header-color: #{$--layout-header-color};
  --layout-header-bg-color: #{$--layout-header-bg-color};
  --layout-header-hover-bg-color: #{$--layout-header-hover-bg-color};
  --layout-logo-color: #{$--layout-logo-color};
  --layout-app-view-bg-color: #f5f7f9;

  --el-border-radius-base: 2px;
  /**文字*/
  --el-font-family: -apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

:export {
  primaryColor: $--color-primary;
  layoutMenuColor: $--layout-menu-color;
  layoutMenuBgColor: $--layout-menu-bg-color;
  layoutMenuActiveColor: $--layout-menu-active-color;
  layoutMenuActiveBgColor: $--layout-menu-active-bg-color;
  layoutSubmenuBgColor: $--layout-submenu-bg-color;
  layoutMenuColumnColor: $--layout-menu-column-color;
  layoutMenuColumnBgColor: $--layout-menu-column-bg-color;
  layoutMenuColumnActiveColor: $--layout-menu-column-active-color;
  layoutMenuColumnActiveBgColor: $--layout-menu-column-bg-color;
  layoutHeaderColor: $--layout-header-color;
  layoutHeaderBgColor: $--layout-header-bg-color;
  layoutHeaderHoverBgColor: $--layout-header-hover-bg-color;
  layoutLogoColor: $--layout-logo-color;
}
